<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 600px;
            margin:100px auto;
        }

        li{
            width: 120px;
            height: 50px;
            /*border: 1px solid #000;*/
            float: left;
            position: relative;
            /* 让子盒子保持3d效果*/
            transform-style:preserve-3d;

            /*过渡*/
            transition:transform 0.5s;

            /*辅助*/
            /*transform:rotateX(-38deg) rotateY(-57deg);*/


        }

        span{
            position: absolute;
            left:0;
            top:0;
            background-color: green;
            color:yellow;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            width: 100%;
            height: 100%;
        }
        span:nth-child(1){
            transform:translateZ(25px);
        }

        span:nth-child(2){
            color:green;
            background-color: yellow;

            transform:rotateX(90deg) translateZ(25px);
        }


        ul:hover li{
            transform:rotateX(-90deg);
        }

        li:nth-child(2){
            transition-delay:0.1s;
        }

        li:nth-child(3){
            transition-delay:0.2s;
        }

        li:nth-child(4){
            transition-delay:0.3s;
        }

        li:nth-child(5){
            transition-delay:0.4s;
        }

    </style>
</head>
<body>
    <ul>
        <li>
            <span>传智播客</span>
            <span>WEB前端</span>
        </li>
        <li>
            <span>传智播客</span>
            <span>WEB前端</span>
        </li>
        <li>
            <span>传智播客</span>
            <span>WEB前端</span>
        </li>
        <li>
            <span>传智播客</span>
            <span>WEB前端</span>
        </li> <li>
        <span>传智播客</span>
        <span>WEB前端</span>
    </li>

    </ul>
</body>
</html>